<template>
	<div id="login">
		<div class="container">
			<div class="logo">
				<img class="icon" src="~@/assets/img/logo.png" />
			</div>
			<div class="title">河南巨阔科技有限公司</div>
			<div class="inputs">
				<input type="text" name="name" placeholder="请输入用户名" />
				<input type="password" name="password" placeholder="请输入密码" />
				<!-- 				<input autocomplete="off" type="password" name="password" placeholder="请输入密码" /> -->
				<button type="submit" @click="dataFormSubmit">登录</button>
			</div>
		</div>
		<div style="position: fixed;bottom: 30px;width: 100%;text-align: center;">
			<a href="https://beian.miit.gov.cn">Copyright © 2020-现在 河南巨阔科技有限公司 www.jkwlw.top 网站备案：豫ICP备8888888888号-1</a>
		</div>
	</div>

</template>

<script>
	import {
		getUUID,
		setLoginInfo
	} from '@/utils';
	export default {
		data() {
			return {
				dataForm: {
					userName: 'admin',
					password: 'admin',
					uuid: '',
					captcha: ''
				},
				dataRule: {
					userName: [{
						required: true,
						message: '帐号不能为空',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}],
					captcha: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}]
				},
				captchaPath: ''
			};
		},
		computed: {},
		created() {
			// this.getCaptcha();
		},
		methods: {
			// 提交表单
			dataFormSubmit() {
				let msg = null
				if (!this.dataForm.userName) {
					msg = '请输入账号'
				}
				if (!this.dataForm.password) {
					msg = '请输入密码'
				}
				if (msg) return this.$message.error(msg);
				// setLoginInfo('123456')
				// this.$router.replace({
				// 	name: 'home'
				// });
				this.$http({
					url: '/sys/login',
					method: 'post',
					isJson: 1,
					data: {
						username: this.dataForm.userName,
						password: this.dataForm.password,
						// uuid: this.dataForm.uuid,
						// captcha: this.dataForm.captcha
					}
				}).then(({
					data
				}) => {
					if (data && data.code === 0) {
						setLoginInfo(data.token)

						this.$router.replace({
							name: 'home'
						})
					} else {
						// this.getCaptcha();
						this.$message.error(data.msg);
					}
				});
			},
			// 获取验证码
			getCaptcha() {
				this.dataForm.uuid = getUUID();
				this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`);
			}
		}
	};
</script>

<style lang="scss">
	@import '@/assets/scss/variables.scss';

	#login {
		margin: 0;
		width: 100vw;
		height: 100vh;
		background: #ecf0f3;
		display: flex;
		align-items: center;
		text-align: center;
		place-items: center;
		overflow: hidden;
		font-family: sans-serif;

		.container {
			width: 350px;
			height: 450px;
			/* height: 520px; */
			background: #ecf0f3;
			padding: 40px;
			border-radius: 20px;
			box-sizing: border-box;
			box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
			position: absolute;
			/*居中显示*/
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}

		.logo {
			height: 100px;
			width: 100px;
			background-size: 160px;
			background-position: -30px;
			margin: auto;
			border-radius: 50%;
			box-sizing: border-box;
			background: $--color-primary;
			box-shadow: 7px 7px 10px #cbced1, -1px -1px 10px $--color-primary;
		}

		.icon {
			height: 100px;
			width: 100px;
			border-radius: 50%;
		}

		.title {
			margin-top: 10px;
			font-weight: 900;
			font-size: 1.6rem;
			// color: #1da1f2;
			// color: $--color-primary;
			letter-spacing: 1px;
		}

		/*输入部分*/
		.inputs {
			text-align: left;
			margin-top: 30px;
		}

		label,
		input,
		button {
			display: block;
			width: 100%;
			padding: 0;
			border: none;
			outline: none;
			box-sizing: border-box;
		}

		label {
			margin-bottom: 4px;
			font-size: 16px;
		}

		label:nth-of-type(2) {
			margin-top: 14px;
		}

		input {
			background: transparent;
			// ''background: #ecf0f3;
			padding: 10px;
			padding-left: 20px;
			font-size: 14px;
			border-radius: 50px;
			height: 50px;
			caret-color: #000;
			box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;

			&:-internal-autofill-selected {
				transition: background-color 5000s ease-in-out 0s !important;
			}

		}

		input+input {
			margin-top: 20px;
			font-family: text-security-disc;
			-webkit-text-security: disc;
		}

		input::placeholder {
			color: gray;
		}

		button {
			margin-top: 20px;
			color: $--color-primary-light-9;
			background: $--color-primary;
			// background: #1da1f2;
			height: 40px;
			border-radius: 20px;
			cursor: pointer;
			font-weight: 900;
			font-family: sans-serif;
			letter-spacing: 1px;
			box-shadow: 6px 6px 6px #cbced1;
		}

		button:hover {
			box-shadow: 6px 6px 6px #cbced1, -1px -1px 6px $--color-primary;
			// box-shadow: inset 6px 6px 6px $--color-primary, inset -6px -6px 6px mix(#fff, $--color-primary, 60%);
		}

		button:active {
			background: mix(#fff, $--color-primary, 20%);
			box-shadow: inset 6px 6px 6px $--color-primary, inset -6px -6px 6px mix(#fff, $--color-primary, 60%);
		}
	}
</style>